<!--
 * @Author: C.
 * @Date: 2024-07-30 13:12:54
-->
<template>
  <div class="flexbox">
    <DragContainer>
      <DragBox v-for="item in boxList" v-bind="item"></DragBox>
    </DragContainer>
  </div>
</template>

<script lang="ts" setup>
import DragBox, {
  DragContainer,
  IDragBoxProps
} from "./components/DragBox/index";
const boxList: IDragBoxProps[] = [
  {
    x: 200,
    y: 200,
    w: 50,
    h: 50,
    bg: "pink",
    parent: false
  },
  {
    x: 300,
    y: 300,
    w: 100,
    h: 100,
    bg: "blue",
    parent: false
  },
  {
    x: 500,
    y: 200,
    w: 150,
    h: 150,
    bg: "orange",
    parent: true
  },
  {
    x: 200,
    y: 500,
    w: 200,
    h: 50,
    bg: "grey",
    parent: true
  },
  {
    x: 500,
    y: 500,
    w: 100,
    h: 100,
    bg: "black",
    parent: true
  }
];
</script>

<style>
.flexbox {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
